# Vue Options-API

vue3 also has the composition-API (more similar to react)

<script>
	export default {
  	name: 'Home',
    //
	},
</script>

# Access variables

use this

methods: {
    changeTitle() {
      this.title = 'A new Title';
    },
  },

# Props

Array

props: ['prop1', 'prop2'];

Object

export default { 
...
  props: {
    src: {
      type: String,
      required: true
    }, 
    style: {
      type: String,
      validator: s => ['square', 'rounded'].includes(s) 
    }
  } 
};

# Data

is, where the state of the application is

Remember: "A Function, that returns an Object"

 data() {
    return {
      message: 'This is Vue.js'
    }
  },

data() {}
// is the same as
data: function() {}

# Methods

 methods: {
    clearMessage(){
      this.message=''
    }
  },

# Computed

-> always recalculates, if something changes

computed: {
    messageUppercase () {
      return this.message.toUpperCase();
    }
  },

# Watch

watch if values change.

watch: {
	firstName (value, oldValue) {
    //
  }
},

Anything that is reactive can be watched: (Composition API: anything that is a ref or reactive object.)

export default { 
   computed: {
		someComputedProperty() {
			// Update the computed prop
		}, 
  },
	watch: { someComputedProperty() {
		// Do something when the computed prop is updated }
	} 
};

nested values by using quotes:

watch: {
  '$route.query.id'() {
    // ...
  }
}

https://vuejs.org/guide/essentials/watchers.html (opens new window)

# Options:

watch: {
	// Use the object syntax instead of just a method 
	colours: {
		// This will let Vue know to look inside the array 
		deep: true,
	
		// We have to move our method to a handler field 	
		handler()
			console.log('The list of colours has changed!'); }
		} 
}

Deep Watchers (opens new window)

Eager Watchers (opens new window) Force a watcher's callback to be executed immediately by declaring it using an object with a handler function and the immediate: true option:

export default {
  // ...
  watch: {
    question: {
      handler(newQuestion) {
        // this will be run immediately on component creation.
      },
      // force eager callback execution
      immediate: true
    }
  }
  // ...
}

Anything in your component that is reactive can be watched, eg::

computed props
props
nested values
Any value can be watched if you're using the composition API, as long as it's a ref or reactive object.

xport default { 
	computed: {
		someComputedProperty() {
			// Update the computed prop
		}, 
	},
	watch: { 
		someComputedProperty() {
			// Do something when the computed prop is updated }
		} 
	};

# Watch nested Values:

use Quotes:


watch: { 
	'$route.query.id'() {
		// ... }
	}

# Directives

you can create your own: add v- bevore the name

  <input
      v-model="message"
      @keyup.enter="alertMessage"
      @keyup.esc="clearMessage"
      v-autofocus
    />
...
      
directives: {
    autofocus: {
      inserted(el) {
        el.focus()
      }
    }
  },

in template:

v-autofocus

Example

<template>
 <h1 v-bg-colour="'skyblue'">This background is blue</h1>
</template>

import { createApp } from "vue"; 
const app = createApp({});

app.directive("bg-colour", { 
  mounted(el, { value }) {
		// Update the background colour
		el.style.background = value; 
  }
});

You can also specify a single argument:

<template>
	<h1 v-bg-colour:colour="'skyblue'">
		This background is blue
	</h1>
</template>

app.directive("bg-colour", { 
	mounted(el, { value, arg }) {
		// Update the background colour 
		el.style.background = value; 
		console.log(arg); // "colour"
	} 
});

if you want multiple arguments pass in an options object:

<template>
	<!-- Two directives will be mounted --> 
	<h1
		v-bg-colour="{ 
    	colour: 'skyblue', 
      animate: true,
		}" 
  >
		This background is blue
	</h1> 
</template>

docs - custom directives (opens new window)

# Components

import Component1 from '@/components/Component1'
...
export default {
	components: {
		Component
	},
}

or like this:

	components: {
  	'test': require('components/Test.vue').default
	}

# Filters

only Vue2

filters: {
    messageLowercase(value) {
      return value.toLowerCase()
    }
  },

← VUE Axios Vue Composition-API →